iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
自我挑戰組

Vue 與 Element UI 兩三事系列 第 23

Vue 與 Element UI 兩三事#23 日期選取器

  • 分享至 

  • xImage
  •  

正文:
上一篇介紹完了時間選取/選擇器,這次就來介紹日期選取器吧

<el-date-picker v-model="date" placeholder="選擇日期"></el-date-picker>

與時間選取器相同,v-model內為 date 型別,我們可以透過 type 屬性設置更多種類的日期選取器,譬如選取週、月、年或是多個日期

<el-date-picker v-model="week" type="week" placeholder="選擇週"></el-date-picker>
<el-date-picker v-model="month" type="month" placeholder="選擇月"></el-date-picker>
<el-date-picker v-model="week" type="year" placeholder="選擇年"></el-date-picker>
<el-date-picker v-model="dates" type="dates" placeholder="選擇多個日期"></el-date-picker>

我們可以透過 format 設定要在輸入框顯示的樣式,透過 value-format 設定綁定值的格式,這邊格式上需要特別注意大小寫

yyyy 年
M 月(不補零)
MM 月
W 周(僅限周選取器才可以使用,不補零)
WW 周(僅限周選取器才可以使用)
d 日(不補零)
dd 日
H 小時(24小時制,不補零)
HH 小時(24小時制)
h 小時(12小時制,須配合 A/a 來使用,不補零)
hh 小時(12小時制,須配合 A/a 來使用)
A AM/PM(僅限 format 使用)
a am/pm(僅限 format 使用)
m 分鐘(不補零)
mm 分鐘
timestamp 時間戳(僅限 value-format 可以使用)

上一篇
Vue 與 Element UI 兩三事#22 element-ui 時間選擇器
下一篇
Vue 與 Element UI 兩三事#24 Form 表單
系列文
Vue 與 Element UI 兩三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言